<template>
  <div>
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="40%"
      @close="noChange"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input
            v-model="ruleForm.code"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="开启" prop="enVisible">
          <el-switch
            v-model="ruleForm.enVisible"
            active-color="#2752fb"
            inactive-color="#ccc"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="okChange">确 定</el-button>
        <el-button @click="noChange">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addPermission, getPermissionList, detailDataPermission, redactDataPermission } from '@/api/permission'
export default {
  name: 'Dialog',
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    pId: {
      type: Number,
      default: null
    },
    redactId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        name: '', // 权限点名字
        code: '', // 权限点标识
        description: '', // 权限点描述
        type: 1, // 权限点类型
        pid: 0, // 权限点父级id
        enVisible: 1 // 权限点开启状态 0关闭, 1开启
      },
      rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '权限名称不能为空'
          },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              const list = await getPermissionList()
              // 判断是编辑还是新增环境
              if (this.redactId) {
                if (list.filter(item => item.id !== this.redactId && item.type === 2).some(item => item.name === value)) {
                  callback(new Error('权限点"名字"不能和子集们现有的权限点名字重复'))
                } else {
                  callback()
                }
              } else {
                if (list.filter(item => item.type === 2).some(item => item.name === value)) {
                  callback(new Error('权限点"名字"不能和子集们现有的权限点名字重复'))
                } else {
                  callback()
                }
              }
            }
          }
        ],
        code: [
          {
            required: true,
            trigger: 'blur',
            message: '权限标识不能为空'
          },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              const list = await getPermissionList()
              if (this.redactId) {
                if (list.filter(item => item.id !== this.redactId).some(item => item.code === value)) {
                  callback(new Error('权限标识不能和所有人重复, 应该是唯一的标识'))
                } else {
                  callback()
                }
              } else {
                if (list.some(item => item.code === value)) {
                  callback(new Error('权限标识不能和所有人重复, 应该是唯一的标识'))
                } else {
                  callback()
                }
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    // 取消按钮
    noChange() {
      this.$emit('update:dialogVisible', false)
    },
    // 确认按钮
    okChange() {
      this.$refs.ruleForm.validate(async isOK => {
        if (isOK) {
          // 判断是否属于编辑状态
          if (this.redactId) {
            console.log(1)
            await redactDataPermission(this.ruleForm)
            this.$message.success('编辑成功！')
            // 重置初始化数据
            this.ruleForm = this.$options.data().ruleForm
            // 关闭弹窗
            this.noChange()
            // 通知父组件刷新数据
            this.$emit('upDate')
            return
          }
          // 判断来源是否行内编辑
          if (this.pId) {
            this.ruleForm.pid = this.pId
            this.ruleForm.type = 2
            await addPermission(this.ruleForm)
          } else {
            await addPermission(this.ruleForm)
          }
          this.$message.success('添加成功！')
          // 关闭弹窗
          this.noChange()
          // 通知父组件刷新数据
          this.$emit('upDate')
        }
      })
    },
    async loadData() {
      if (this.redactId) {
        this.ruleForm = await detailDataPermission(this.redactId)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
